{include file="start" /}
<title>重卡汇</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_hga6y0mggtrcnmi.css">
<link rel="stylesheet" href="/_hongyanche/css/app.css">
<link rel="stylesheet" href="/css/swiper.min.css">
<style>
    .customer-wrapper {
        position: fixed;
        width: 100%;
        height: 100%;
        background: #fff;
    }

    .customer-wrapper .header {
        text-align: center;
        font-size: 1.3rem;
        color: white;
        font-weight: 800;
        background: cadetblue;
    }

    .customer-wrapper .header span {
        float: left;
    }

    .customer-wrapper .line {
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }

    .customer-wrapper .weui-flex {
        display: flex;
    }

    .customer-wrapper .weui-flex .i img {
        width: 38px;
    }

    .customer-wrapper .weui-flex .desc {
        margin-left: 5px;
        font-size: 12px;
    }

    .customer-wrapper .weui-flex .desc span {
        display: block;
        text-align: center;
    }

    .customer-wrapper .last-time {
        padding: 10px 15px;
    }

    .customer-wrapper .tab .weui-flex__item {
        text-align: center;
    }

    .customer-wrapper .tab {
        padding: 15px 0;
    }

    .customer-wrapper .tab a {
        color: #444;
    }

    .customer-wrapper .tab .bg {
        width: 100%;
        height: 3rem;
        border-radius: 50%;
        background-size: 70%;
    }

    .customer-wrapper .tab .clxinxi {
        background: url(/_hongyanche/material/kache.png) no-repeat center;
    }

    .customer-wrapper .tab .baobiao {
        background: url(/_hongyanche/material/baobiao.png) no-repeat center;
    }

    .customer-wrapper .tab .guiji {
        background: url(/_hongyanche/material/guiji.png) no-repeat center;
    }

    .customer-wrapper .addr {
        padding: 10px 15px;
    }

    .customer-wrapper .addr .icon {
        background: url(/_hongyanche/material/dingwei.png) no-repeat center;
        width: 44px;
        height: 44px;
        display: inline-block;
        background-position: center;
        background-size: 70%;
        vertical-align: middle;
    }

    .customer-wrapper .addr .addr-datail {
        vertical-align: middle;
    }
    /* .customer-wrapper .map{width: 100%; height: 100%;} */

    .customer-wrapper .des {
        position: absolute;
        bottom: 0;
        background: #fff;
        width: 100%;
        padding: 8px;
        color: #333;
        font-size: 14px;
    }
</style>
<div class="customer-wrapper" id="wrap">
    <div id="info">
        <div class="header">
            <span id="back"><</span> 行车信息
        </div>
        <div class="weui-cell line">
            <div class="weui-cell__hd" style="padding-right:1.5rem;">
                <span class="tit">车架号:</span>
                <span class="dec" id="vhvin8">****</span>
            </div>
            <div class="weui-cell_hd">
                <span class="tit">设备号:</span>
                <span class="dec" id="simNo">****</span>
            </div>
        </div>
        <div class=" weui-cell weui-flex line">
            <div class="weui-flex__item weui-flex">
                <span class="i"><img src="/_hongyanche/material/licheng.png" alt=""></span>
                <div class="desc">
                    <span>里程</span>
                    <span><span id="totalMileage" style="display:inline;">3442</span>km</span>
                </div>
            </div>
            <div class="weui-flex__item weui-flex">
                <span class="i"><img src="/_hongyanche/material/chesu.png" /></span>
                <div class="desc">
                    <span>车速</span>
                    <span>0Km/h</span>
                </div>
            </div>
            <div class="weui-flex__item weui-flex">
                <span class="i"><img src="/_hongyanche/material/ranyou.png" /></span>
                <div class="desc">
                    <span>燃油</span>
                    <span><span id="totalFuelConsumption" style="display:inline;">0</span>L</span>
                </div>
            </div>
            <div class="hidden" id="vhcle"></div>
        </div>
        <div class="last-time line">最后回传时间：<span class="time" id="date">正在获取时间</span></div>
        <div class="tab weui-flex line">
            <a href="/home/carinfo_info" class="weui-flex__item href">
                <div class="clxinxi bg"></div>
                <span class="tit">车辆信息</span>
            </a>
            <a href="/home/car_week" class=" weui-flex__item href">
                <div class="baobiao bg"></div>
                <span class="tit">报表</span>
            </a>
            <a id="vin" href="/home/car_track_detail" class=" weui-flex__item href">
                <div class="guiji bg"></div>
                <span class="tit">轨迹回放</span>
            </a>
        </div>
        <div class="addr line">
            <span class="icon"></span>
            <span class="addr-detail" id="address">正在获取地址</span>
        </div>
    </div>
    <div class="map" id="allmap"></div>
    <div class="des">今日统计：行驶<span id="mileage"></span>km;油耗<span id="fuelConsumption"></span>L;平均<span id="lp100km"></span>L/百公里</div>
</div>
<script>
    document.getElementById('allmap').style.height = hei() + 'px';
    function getVin(name) {
        var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
        if (result == null || result.length < 1) {
            return "";
        }
        return decodeURI(result[1]);
    }
    function Bmap(lng, lat) {
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(lng, lat);
        map.centerAndZoom(point, 16);
        map.enableScrollWheelZoom();

        var myIcon = new BMap.Icon("/_hongyanche/material/biaozhu.png", new BMap.Size(30, 30), {
            anchor: new BMap.Size(10, 10)
        });

        var marker = new BMap.Marker(point, { icon: myIcon });
        map.addOverlay(marker);
    }
    Bmap('116.3972', '39.9096');
    $('body').on('click', '#back', function () {
        window.history.back();
    });
    function initPage() {
        $.ajax({
            url: '/maintain/getcarinfo',
            type: 'POST',
            data: {
                vhcle: getVin('vin')
            },
            xhrFields:{
                withCredentials:true
            },
            success: function (data) {
                if (data.state) {
                    var info = data.data.info;
                    for (var a in info) {
                        $(`#${a}`).text(info[a]);
                        localStorage[a] = info[a];
                        localStorage.carID = getVin('id');
                        localStorage.vehicle_brand = getVin('vehicle_brand');
                    }
                    localStorage.setItem('vhcle', $('#vhcle').text());
                    var a = 'http://api.map.baidu.com/geocoder/v2/?address=' + info.address + '&output=json&ak=zInrkldrOGmWFcCTSifNBRYfKCDtz199';
                    $.ajax({
                        url: a,
                        dataType: 'jsonp',
                        type: 'GET',
                        jsonp: 'callback',

                        success: function (data) {
                            if (data.status) {
                                return
                            }
                            var lng = data.result.location.lng,
                                lat = data.result.location.lat;
                            Bmap(lng, lat);
                        }
                    });
                } else {
                    TOAST.wran('网络错误', ' ', 1);
                }
            },
            error: function (err) {
                TOAST.wran('网络错误', ' ', 1);
            }
        });
        $('.href').each(function (index, item) {
            $(item).attr('href', $(item).attr('href') + "?vin=" + getVin('vin'));
        });
    }
    initPage();
    function hei() {
        var sHeight = document.getElementById('wrap').offsetHeight;
        var eHeight = document.getElementById('info').offsetHeight;
        return sHeight - eHeight;
    };
</script>

{include file="end" /}